import React from 'react';
import { CardMedia, makeStyles, Typography } from '@material-ui/core';

const boxHeight = '280px';
const useStyles = makeStyles({
  root: {
    height: boxHeight,
    position: 'relative',
    overflow: 'hidden',
  },
  headerImage: {
    height: boxHeight,
  },
  headerTitle: {
    position: 'absolute',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    // color: 'white',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
  },
});

interface IProps {
  title?: string;
  cover?: string;
}

const HeaderImage: React.FC<IProps> = props => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <CardMedia
        className={classes.headerImage}
        component="img"
        alt={props.title}
        image={props.cover}
      />
      <Typography
        color="textSecondary"
        className={classes.headerTitle}
        variant="h4"
      >
        {props.title}
      </Typography>
    </div>
  );
};

export default HeaderImage;
